@extends('admin.base')
@section('css')
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
<link rel="stylesheet" href="/css/sweetalert/sweetalert.css"/>
@parent

@stop



@section('content')
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-4">
        <h2>图库列表</h2>
        <ol class="breadcrumb">
            <li>
                <a href="{{route('/')}}">首页</a>
            </li>
            <li>
                <strong>图库列表</strong>
            </li>
        </ol>
    </div>
    <div class="col-sm-8">
        <div class="title-action">
            <a  id="pickers" class="btn uploadimage">上传图片</a>
        </div>

    </div>
    <!--上传进度条-->
    <div class="col-sm-12" id="uploadprocess" style="position: absolute;top:13%;display: none">
        <div class="progress progress-striped active">
            <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar progress-bar-danger">
                <span class="sr-only">40% Complete (success)</span>
            </div>
        </div>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeInUp">
    <div class="col-sm-12">
        @foreach ($mediaList['item'] as $media)
        <div class="file-box">
            <div class="file">
                <span class="corner"></span>

                <div class="image">
                    <img alt="image" class="pic{{$media['media_id']}} img-responsive" src="{{$media['weixinurl']}}">
                </div>
                <div class="file-name">
                    <small>添加时间：{{date('Y-m-d',$media['create_time'])}}</small>
                </div>
                <div class="file-name deletepic" data-media_id="{{$media['media_id']}}">
                    <small>删除</small>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    <?php echo $mediaList['item']->render(); ?>
</div>
@stop

@section('script')
@parent

<script data-exec-on-popstate>

    $(function() {


        // 查看图片
        $('img[class^=pic]').on('click', function() {

            var picsrc = $(this).attr('src');
            var thispic = $(this);
            layer.open({
                type: 1,
                title: false,
                closeBtn: true,
                offset: ['0px','258px'],
                //area: '516px',
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: false,
                shade: false,
                content: $(this),
                success: function(layero, index) {
                    console.log(thispic.css('display')); // block
                },
                end : function() {
                    console.log(thispic.css('display')); // none
                    thispic.css({'display':'block'});
                }
            });
        });

        // 删除图片
        $('.deletepic').on('click', function() {
            var $media_id = $(this).data('media_id');
            var $this = $(this);
            swal({
                    title: "确定要删除该图片吗？",
                    text: "同时也会删除微信的图库中的图片",
                    type: "info",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,
                },
                function(){
                    $.ajax({
                        url : "{{route('deletepic')}}",
                        type: 'post',
                        data:{'_token': "{{ csrf_token() }}", 'mediaId':$media_id},
                        success: function(data) {
                            if(data.code==200) {
                                swal("成功!", "删除成功", "success");
                                $this.closest('div.file-box').remove();
                            }else {
                                swal("失败!", "删除失败", "error");
                            }
                        }
                    });
                });
        });

    })


    var uploader = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto: true,
        fileSingleSizeLimit: 5 * 1024 * 1024,    // 5 M
        // swf文件路径
        swf: '/webuploader/Uploader.swf',

        // 文件接收服务端。
        server: "{{route('uploadimage')}}",

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#pickers',
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false

    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {

        $('#uploadprocess').show();
        $('.progress-bar').css( 'width', percentage * 100 + '%' );
    });
    uploader.on( 'uploadComplete', function( file ) {
        $( '#uploadprocess' ).hide();
    });


    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file ) {
        console.log(file);
        swal("上传成功!~", '', "success");
    });

    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        console.log(file);
        swal("上传失败!", data.message, "error");
    });
    uploader.onError = function( code ) {
        swal("上传失败!", '', "error");
    };

</script>
@stop
